<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络安全智能分析平台</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="{{url_for('static',filename='js/index.js')}}"></script>
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏导航 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class="fas fa-shield-alt"></i>
                    <h1>安全分析平台</h1>
                </div>
                <button class="sidebar-toggle" id="sidebar-toggle">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
            
            <nav class="sidebar-nav">
                <div class="nav-section">
                    <h3>分析工具</h3>
                    <ul class="nav-list">
                        <li class="nav-item active" data-tab="traffic">
                            <i class="fas fa-network-wired"></i>
                            <span>流量分析</span>
                        </li>
                        <li class="nav-item" data-tab="js">
                            <i class="fab fa-js-square"></i>
                            <span>JS审计</span>
                        </li>
                        <li class="nav-item" data-tab="process">
                            <i class="fas fa-microchip"></i>
                            <span>进程分析</span>
                        </li>
                        <li class="nav-item" data-tab="regex">
                            <i class="fas fa-code"></i>
                            <span>正则生成</span>
                        </li>
                        <li class="nav-item" data-tab="webshell">
                            <i class="fas fa-bug"></i>
                            <span>WebShell检测</span>
                        </li>
                        <li class="nav-item" data-tab="weblog-analysis">
                            <i class="fas fa-file-alt"></i>
                            <span>Web日志分析</span>
                        </li>
                    </ul>
                </div>
                
                <div class="nav-section">
                    <h3>辅助功能</h3>
                    <ul class="nav-list">
                        <li class="nav-item" data-tab="ai-translation">
                            <i class="fas fa-language"></i>
                            <span>AI翻译</span>
                        </li>
                        <li class="nav-item" data-tab="config-management">
                            <i class="fas fa-cog"></i>
                            <span>配置管理</span>
                        </li>
                    </ul>
                </div>
            </nav>
            
            <div class="sidebar-footer">
                <div class="theme-selector">
                    <label for="theme"><i class="fas fa-palette"></i> 主题</label>
                    <select id="theme">
                        {% for theme_name in themes %}
                        <option value="{{ theme_name }}">{{ theme_name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </aside>
        
        <!-- 主内容区域 -->
        <main class="main-content">
            <div class="content-wrapper">

                <!-- 流量分析 -->
                <div class="tab-content active" id="traffic">
                    <div class="page-header">
                        <h2><i class="fas fa-network-wired"></i> 网络流量智能分析</h2>
                        <p class="page-description">使用AI大模型分析HTTP请求数据，识别潜在的安全威胁和异常行为</p>
                    </div>
                    
                    <div class="content-grid">
                        <div class="card">
                            <div class="card-header">
                                <h3><i class="fas fa-search"></i> 流量分析</h3>
                            </div>
                            <div class="card-body">
                                <div class="input-group">
                                    <label for="traffic-input">HTTP请求数据</label>
                                    <textarea id="traffic-input" placeholder="粘贴HTTP请求数据...\n\n示例：\nGET /admin/login.php?id=1' OR '1'='1 HTTP/1.1\nHost: example.com\nUser-Agent: Mozilla/5.0..."></textarea>
                                </div>
                                <div class="button-group">
                                    <button id="analyze-btn" class="btn btn-primary">
                                        <i class="fas fa-play"></i> 开始智能分析
                                    </button>
                                    <button class="btn btn-secondary" onclick="document.getElementById('traffic-input').value=''">
                                        <i class="fas fa-trash"></i> 清空
                                    </button>
                                </div>
                                <div class="result-container">
                                    <h4><i class="fas fa-chart-line"></i> 分析结果</h4>
                                    <div id="traffic-result" class="result-content"></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card">
                            <div class="card-header">
                                <h3><i class="fas fa-unlock"></i> 智能解码</h3>
                            </div>
                            <div class="card-body">
                                <div class="input-group">
                                    <label for="decode-input">编码字符串</label>
                                    <textarea id="decode-input" placeholder="输入需要解码的字符串...\n\n支持格式：\n- URL编码\n- Base64编码\n- HTML实体编码\n- Unicode编码"></textarea>
                                </div>
                                <div class="button-group">
                                    <button id="decode-btn" class="btn btn-primary">
                                        <i class="fas fa-key"></i> 智能解码
                                    </button>
                                    <button class="btn btn-secondary" onclick="document.getElementById('decode-input').value=''">
                                        <i class="fas fa-trash"></i> 清空
                                    </button>
                                </div>
                                <div class="result-container">
                                    <h4><i class="fas fa-code"></i> 解码结果</h4>
                                    <div id="decode-result" class="result-content"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- JS审计 -->
                <div class="tab-content" id="js">
                    <div class="page-header">
                        <h2><i class="fab fa-js-square"></i> JavaScript代码安全审计</h2>
                        <p class="page-description">深度分析JavaScript代码，识别潜在的安全漏洞和恶意代码</p>
                    </div>
                    
                    <div class="single-card-layout">
                        <div class="card">
                            <div class="card-header">
                                <h3><i class="fas fa-shield-alt"></i> 代码安全审计</h3>
                            </div>
                            <div class="card-body">
                                <div class="input-group">
                                    <label for="js-input">JavaScript代码</label>
                                    <textarea id="js-input" placeholder="粘贴JavaScript代码...\n\n支持检测：\n- XSS漏洞\n- 恶意函数调用\n- 代码混淆\n- 后门代码"></textarea>
                                </div>
                                <div class="button-group">
                                    <button id="js-audit-btn" class="btn btn-primary">
                                        <i class="fas fa-search"></i> 开始安全审计
                                    </button>
                                    <button class="btn btn-secondary" onclick="document.getElementById('js-input').value=''">
                                        <i class="fas fa-trash"></i> 清空
                                    </button>
                                </div>
                                <div class="result-container">
                                    <h4><i class="fas fa-exclamation-triangle"></i> 审计结果</h4>
                                    <div id="js-result" class="result-content"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 进程分析 -->
                <div class="tab-content" id="process">
                    <div class="page-header">
                        <h2><i class="fas fa-microchip"></i> 进程分析</h2>
                        <p class="page-description">分析系统进程信息，识别异常进程和潜在威胁</p>
                    </div>
                    
                    <div class="single-card-layout">
                        <div class="card">
                            <div class="card-header">
                                <h3><i class="fas fa-tasks"></i> 进程信息分析</h3>
                            </div>
                            <div class="card-body">
                                <div class="input-group">
                                    <label for="process-input">进程信息</label>
                                    <textarea id="process-input" placeholder="粘贴tasklist或ps aux信息...\n\n支持格式：\n- Windows: tasklist /v\n- Linux: ps aux\n- 进程列表文件"></textarea>
                                </div>
                                <div class="button-group">
                                    <button id="process-btn" class="btn btn-primary">
                                        <i class="fas fa-play"></i> 开始进程分析
                                    </button>
                                    <button class="btn btn-secondary" onclick="document.getElementById('process-input').value=''">
                                        <i class="fas fa-trash"></i> 清空
                                    </button>
                                </div>
                                <div class="result-container">
                                    <h4><i class="fas fa-chart-bar"></i> 分析结果</h4>
                                    <div id="process-result" class="result-content"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



            <!-- 正则生成 -->
            <div class="tab-content" id="regex">
                <div class="page-header">
                    <h2><i class="fas fa-code"></i> 正则表达式生成器</h2>
                    <p class="page-description">智能生成匹配文本模式的正则表达式</p>
                </div>
                <div class="content-grid">
                    <div class="card">
                        <div class="card-header">
                            <h3><i class="fas fa-edit"></i> 文本输入</h3>
                        </div>
                        <div class="card-body">
                            <div class="input-group">
                                <label for="regex-input">示例文本</label>
                                <textarea id="regex-input" placeholder="请输入需要匹配的文本示例，例如：\n邮箱：user@example.com\n手机：13812345678\n身份证：110101199001011234"></textarea>
                            </div>
                            <div class="button-group">
                                <button id="regex-btn" class="btn btn-primary">
                                    <i class="fas fa-magic"></i> 生成正则
                                </button>
                                <button class="btn btn-secondary" onclick="document.getElementById('regex-input').value=''">
                                    <i class="fas fa-eraser"></i> 清空
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <h3><i class="fas fa-code"></i> 生成结果</h3>
                        </div>
                        <div class="card-body">
                            <div class="result-container">
                                <h4><i class="fas fa-check-circle"></i> 正则表达式</h4>
                                <div id="regex-result" class="result-content">等待生成正则表达式...</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- WebShell检测 -->
            <div class="tab-content" id="webshell">
                <div class="page-header">
                    <h2><i class="fas fa-shield-alt"></i> WebShell检测</h2>
                    <p class="page-description">检测可疑的WebShell代码和恶意脚本</p>
                </div>
                <div class="content-grid">
                    <div class="card">
                        <div class="card-header">
                            <h3><i class="fas fa-code"></i> 代码输入</h3>
                        </div>
                        <div class="card-body">
                            <div class="input-group">
                                <label for="webshell-input">可疑代码</label>
                                <textarea id="webshell-input" placeholder="请输入需要检测的代码，例如：\n<?php eval($_POST['cmd']); ?>\n<script>eval(atob('...'))</script>\nSystem.out.println(Runtime.getRuntime().exec(request.getParameter('cmd')));"></textarea>
                            </div>
                            <div class="button-group">
                                <button id="webshell-btn" class="btn btn-primary">
                                    <i class="fas fa-search"></i> 检测WebShell
                                </button>
                                <button class="btn btn-secondary" onclick="document.getElementById('webshell-input').value=''">
                                    <i class="fas fa-eraser"></i> 清空
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <h3><i class="fas fa-exclamation-triangle"></i> 检测结果</h3>
                        </div>
                        <div class="card-body">
                            <div class="result-container">
                                <h4><i class="fas fa-bug"></i> 威胁分析</h4>
                                <div id="webshell-result" class="result-content">等待检测结果...</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Web日志分析 -->
            <div id="weblog-analysis" class="tab-content">
                <div class="page-header">
                    <h2><i class="fas fa-chart-line"></i> Web日志分析</h2>
                    <p>分析Web服务器日志，识别异常访问和安全威胁</p>
                </div>
                <div class="content-grid">
                    <div class="card">
                        <div class="card-header">
                            <h3><i class="fas fa-file-alt"></i> 日志输入</h3>
                        </div>
                        <div class="card-body">
                            <div class="input-group">
                                <label for="weblog-input">Web日志内容</label>
                                <textarea id="weblog-input" placeholder="请输入Web日志内容，例如：\n192.168.1.100 - - [10/Oct/2023:13:55:36 +0000] \"GET /admin/login.php HTTP/1.1\" 200 1234\n10.0.0.1 - - [10/Oct/2023:13:56:12 +0000] \"POST /upload.php HTTP/1.1\" 403 567"></textarea>
                            </div>
                            <div class="input-group">
                                <label>分析选项</label>
                                <div class="checkbox-group">
                                    <label class="checkbox-item">
                                        <input type="checkbox" name="analysis-type" value="攻击检测" checked>
                                        <span>攻击检测</span>
                                    </label>
                                    <label class="checkbox-item">
                                        <input type="checkbox" name="analysis-type" value="异常行为" checked>
                                        <span>异常行为</span>
                                    </label>
                                    <label class="checkbox-item">
                                        <input type="checkbox" name="analysis-type" value="访问统计">
                                        <span>访问统计</span>
                                    </label>
                                    <label class="checkbox-item">
                                        <input type="checkbox" name="analysis-type" value="性能分析">
                                        <span>性能分析</span>
                                    </label>
                                </div>
                            </div>
                            <div class="button-group">
                                <button class="btn btn-info" id="choose-log-file">
                                    <i class="fas fa-upload"></i> 选择日志文件
                                </button>
                                <button class="btn btn-primary" onclick="analyzeWeblog()">
                                    <i class="fas fa-chart-bar"></i> 分析日志
                                </button>
                                <button class="btn btn-success" onclick="chatWeblog()">
                                    <i class="fas fa-comments"></i> 智能对话
                                </button>
                                <button class="btn btn-secondary" onclick="clearWeblogInput()">
                                    <i class="fas fa-eraser"></i> 清空
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <h3><i class="fas fa-analytics"></i> 分析结果</h3>
                        </div>
                        <div class="card-body">
                            <div class="result-container">
                                <div id="weblog-result" class="result-content">等待分析结果...</div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <h3><i class="fas fa-comments"></i> 智能对话</h3>
                        </div>
                        <div class="card-body">
                            <div class="chat-container">
                                <div id="weblog-chat-messages" class="chat-messages"></div>
                                <div class="chat-input-container">
                                    <input type="text" id="weblog-chat-input" placeholder="请输入您的问题，例如：这些日志中有哪些异常访问？" class="chat-input">
                                    <button id="weblog-chat-send" class="btn btn-primary chat-send-btn">
                                        <i class="fas fa-paper-plane"></i>
                                    </button>
                                </div>
                                <div class="chat-actions">
                                    <button id="weblog-chat-clear" class="btn btn-secondary btn-sm">
                                        <i class="fas fa-trash"></i> 清空对话
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- AI翻译 -->
            <div id="ai-translation" class="tab-content">
                <div class="page-header">
                    <h2><i class="fas fa-language"></i> AI智能翻译</h2>
                    <p>多语言智能翻译，支持技术文档和代码注释翻译</p>
                </div>
                <div class="content-grid">
                    <div class="card">
                        <div class="card-header">
                            <h3><i class="fas fa-edit"></i> 文本输入</h3>
                        </div>
                        <div class="card-body">
                            <div class="input-group">
                                <label for="translation-input">原文内容</label>
                                <textarea id="translation-input" placeholder="请输入需要翻译的文本，例如：\nHello World!\n这是一个测试文本\nfunction getUserInfo() { return user; }"></textarea>
                            </div>
                            <div class="input-group">
                                <label for="target-language">目标语言</label>
                                <select id="target-language">
                                    <option value="en">🇺🇸 英语 (English)</option>
                                    <option value="zh">🇨🇳 中文 (Chinese)</option>
                                    <option value="ja">🇯🇵 日语 (Japanese)</option>
                                    <option value="ko">🇰🇷 韩语 (Korean)</option>
                                    <option value="fr">🇫🇷 法语 (French)</option>
                                    <option value="de">🇩🇪 德语 (German)</option>
                                    <option value="es">🇪🇸 西班牙语 (Spanish)</option>
                                    <option value="ru">🇷🇺 俄语 (Russian)</option>
                                </select>
                            </div>
                            <div class="button-group">
                                <button class="btn btn-primary" onclick="translateText()">
                                    <i class="fas fa-exchange-alt"></i> 开始翻译
                                </button>
                                <button class="btn btn-secondary" onclick="clearTranslationInput()">
                                    <i class="fas fa-eraser"></i> 清空
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <h3><i class="fas fa-globe"></i> 翻译结果</h3>
                        </div>
                        <div class="card-body">
                            <div class="result-container">
                                <div id="translation-result" class="result-content">等待翻译结果...</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 配置管理 -->
            <div id="config-management" class="tab-content">
                <div class="page-header">
                    <h2><i class="fas fa-cogs"></i> 系统配置</h2>
                    <p>管理系统设置、API配置和模型参数</p>
                </div>
                <div class="content-grid">
                    <div class="card">
                        <div class="card-header">
                            <h3><i class="fas fa-key"></i> API配置</h3>
                        </div>
                        <div class="card-body">
                            <div class="input-group">
                                <label for="api-type">API提供商</label>
                                <select id="api-type" onchange="handleApiTypeChange()">
                                    <option value="deepseek">🔍 DeepSeek</option>
                                    <option value="openrouter">🌐 OpenRouter</option>
                                    <option value="ollama">🦙 Ollama</option>
                                </select>
                            </div>
                            
                            <!-- DeepSeek配置 -->
                            <div id="deepseek-config" class="api-config">
                                <div class="input-group">
                                    <label for="deepseek-url">API地址</label>
                                    <input type="text" id="deepseek-url" placeholder="https://api.deepseek.com">
                                </div>
                                <div class="input-group">
                                    <label for="deepseek-key">API密钥</label>
                                    <input type="password" id="deepseek-key" placeholder="请输入DeepSeek API密钥">
                                </div>
                                <div class="input-group">
                                    <label for="deepseek-model">模型</label>
                                    <input type="text" id="deepseek-model" placeholder="deepseek-chat">
                                </div>
                            </div>
                            
                            <!-- OpenRouter配置 -->
                            <div id="openrouter-config" class="api-config" style="display: none;">
                                <div class="input-group">
                                    <label for="openrouter-url">API地址</label>
                                    <input type="text" id="openrouter-url" placeholder="https://openrouter.ai/api/v1">
                                </div>
                                <div class="input-group">
                                    <label for="openrouter-key">API密钥</label>
                                    <input type="password" id="openrouter-key" placeholder="请输入OpenRouter API密钥">
                                </div>
                                <div class="input-group">
                                    <label for="openrouter-model">模型</label>
                                    <input type="text" id="openrouter-model" placeholder="openai/gpt-3.5-turbo">
                                </div>
                            </div>
                            
                            <!-- Ollama配置 -->
                            <div id="ollama-config" class="api-config" style="display: none;">
                                <div class="input-group">
                                    <label for="ollama-url">API地址</label>
                                    <input type="text" id="ollama-url" placeholder="http://localhost:11434">
                                </div>
                                <div class="input-group">
                                    <label for="ollama-model">模型</label>
                                    <input type="text" id="ollama-model" placeholder="llama2">
                                </div>
                            </div>
                            <div class="button-group">
                                <button id="load-config-btn" class="btn btn-success">
                                    <i class="fas fa-download"></i> 加载当前配置
                                </button>
                                <button id="save-config-btn" class="btn btn-primary">
                                    <i class="fas fa-save"></i> 保存配置
                                </button>
                                <button id="test-config-btn" class="btn btn-warning">
                                    <i class="fas fa-plug"></i> 测试连接
                                </button>
                                <button id="validate-config-btn" class="btn btn-info">
                                    <i class="fas fa-check-circle"></i> 验证配置
                                </button>
                                <button id="reset-config-btn" class="btn btn-danger">
                                     <i class="fas fa-undo"></i> 重置配置
                                 </button>
                             </div>
                             <div class="result-container">
                                 <h4><i class="fas fa-info-circle"></i> 操作结果</h4>
                                 <div id="config-result" class="result-content">等待操作...</div>
                             </div>
                         </div>
                     </div>
                    <div class="card">
                        <div class="card-header">
                            <h3><i class="fas fa-chart-pie"></i> 系统状态</h3>
                        </div>
                        <div class="card-body">
                            <div class="result-container">
                                <div id="system-status" class="result-content">
                                    <div class="status-item">
                                        <span class="status-label">API状态:</span>
                                        <span class="status-value" id="api-status">未配置</span>
                                    </div>
                                    <div class="status-item">
                                        <span class="status-label">当前模型:</span>
                                        <span class="status-value" id="current-model">未选择</span>
                                    </div>
                                    <div class="status-item">
                                        <span class="status-label">系统版本:</span>
                                        <span class="status-value">v1.0.0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</body>
</html>